<script lang="ts" setup>
import { Plus } from "@element-plus/icons-vue"
import { reactive, ref, watch } from "vue"
import {
  createTableDataApi,
  deleteTableDataApi,
  updateTableDataApi,
  getTableDataApi,
  uploadImageLIst,
  downLoadTable
} from "@/api/table"
import { type IGetTableData } from "@/api/table/types/table"
import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
import { Search, Refresh, CirclePlus, Download, RefreshRight, Delete, ZoomIn } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { useUserStore } from "@/store/modules/user"
import { useJobStore } from "@/store/modules/job"
import { useTeamStore } from "@/store/modules/team"
import { useCommonStore } from "@/store/modules/common"
import { checkPhoneNumber } from "@/utils/validate"
import { RestBtn } from "@/utils/btnRest"
defineOptions({
  name: "WorkerList"
})
const jobStore = useJobStore()
const teamStore = useTeamStore()
const commonStore = useCommonStore()
const currentName = ref<any>("")
const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
// *********** 首次进入页面从接口取职位/团队列表数据，有缓存后从缓存读取**********//
const jobList = ref<any>([])
const teamList = ref<any>([])

// *********** ========================================END========================================**********//
//#region 增
const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const userStore = useUserStore()
const formData = reactive({
  name: "",
  sex: "男",
  phone: "",
  // card: "",
  job: "",
  team: ref<any>(""),
  recruit: userStore.nickName == "" || userStore.nickName == null ? userStore.username : userStore.nickName,
  birth: "",
  join: "",
  quit: "",
  log: "",
  image: "",
  interview: "", // 面试日期
  pact: "", // 合同日期
  pactExpire: "", // 合同结束日期
  official: "", // 转正日期
  education: "", // 学历
  state: ""
})

const formRules: FormRules = reactive({
  name: [{ required: true, trigger: "blur", message: "请输入员工名" }],
  phone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
  // card: [{ required: true, validator: checkID, trigger: "blur" }],
  job: [{ required: true, message: "请选择职位", trigger: "blur" }],
  team: [{ required: true, message: "请选择团队", trigger: "blur" }],
  state: [{ required: true, message: "请选择状态", trigger: "blur" }],
  birth: [{ required: true, message: "请选择时间", trigger: "blur" }]
})
const handleAdd = () => {
  dialogVisible.value = true
  currentUpdateId.value = undefined
  formData.recruit = userStore.nickName == "" || userStore.nickName == null ? userStore.username : userStore.nickName
}
const handleCreate = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (currentUpdateId.value === undefined) {
        createTableDataApi({
          name: formData.name,
          sex: formData.sex,
          phone: formData.phone,
          // card: formData.card,
          job: formData.job,
          team: formData.team,
          recruit: formData.recruit,
          birth: formData.birth,
          join: formData.join,
          quit: formData.quit,
          log: formData.log,
          image: formData.image,
          interview: formData.interview,
          pact: formData.pact,
          pactExpire: formData.pactExpire,
          official: formData.official,
          education: formData.education,
          state: formData.state
        }).then(() => {
          ElMessage.success("新增成功")
          dialogVisible.value = false
          getTableData()
        })
      } else {
        updateTableDataApi({
          id: currentUpdateId.value,
          name: formData.name,
          sex: formData.sex,
          phone: formData.phone,
          // card: formData.card,
          job: formData.job,
          team: formData.team,
          recruit: formData.recruit,
          birth: formData.birth,
          join: formData.join,
          quit: formData.quit,
          log: formData.log,
          image: formData.image,
          interview: formData.interview,
          pact: formData.pact,
          pactExpire: formData.pactExpire,
          official: formData.official,
          education: formData.education,
          state: formData.state
        }).then(() => {
          ElMessage.success("修改成功")
          dialogVisible.value = false
          getTableData()
        })
      }
    } else {
      return false
    }
  })
}
const resetForm = () => {
  currentUpdateId.value = undefined
  clearValidate()
  formData.name = ""
  formData.sex = ""
  formData.phone = ""
  // formData.card = ""
  formData.job = ""
  formData.team = ""
  // formData.recruit = ""
  formData.birth = ""
  formData.join = ""
  formData.quit = ""
  formData.log = ""
  formData.image = ""
  formData.interview = ""
  formData.pact = ""
  formData.pactExpire = "" // 清空！！
  formData.official = ""
  formData.education = ""
  formData.state = ""
}
//#endregion

//#region 删
const handleDelete = (row: IGetTableData) => {
  RestBtn(event)
  ElMessageBox.confirm(`正在删除员工：${row.name}，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteTableDataApi(row.id).then(() => {
      ElMessage.success("删除成功")
      getTableData()
    })
  })
}
//#endregion

//#region 改
const currentUpdateId = ref<undefined | string>(undefined)
const handleUpdate = (row: IGetTableData) => {
  RestBtn(event)
  currentUpdateId.value = row.id
  formData.name = row.name
  formData.sex = row.sex
  formData.phone = row.phone
  // formData.card = row.card
  formData.job = row.job
  formData.team = row.team
  formData.recruit = row.recruit
  formData.birth = formatDate(row, "birth")
  formData.join = formatDate(row, "join")
  formData.quit = formatDate(row, "quit")
  formData.interview = formatDate(row, "interview")
  formData.pact = formatDate(row, "pact")
  formData.pactExpire = formatDate(row, "pactExpire")
  formData.official = formatDate(row, "official")
  formData.log = row.log
  formData.education = row.education
  formData.state = row.state
  // console.log(row.state, "---")

  formData.image = row.image
    ?.split(",")
    .map((item: any) => {
      return item.split("/image/")[1]
    })
    .join()
  dialogVisible.value = true
}
//#endregion

//#region 查
const tableData = ref<IGetTableData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  name: "",
  job: "",
  team: "",
  recruit: "",
  state: "",
  sex: "",
  education: "",
  isPact: "",
  max: "",
  min: ""
})
/**年龄转日期 */
const ageToDate = (age: any) => {
  if (age) {
    const birthYear = new Date().getFullYear() - age
    const birth = new Date(birthYear, 0, 1).getTime() + ""
    return birth
  }
}
const getTableData = () => {
  loading.value = true
  getTableDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    name: searchData.name || undefined,
    job: searchData.job || undefined,
    team: searchData.team || undefined,
    recruit: searchData.recruit || undefined,
    state: searchData.state || undefined,
    sex: searchData.sex || undefined,
    education: searchData.education || undefined,
    isPact: searchData.isPact == null ? undefined : searchData.isPact,
    max: ageToDate(searchData.max) || undefined,
    min: ageToDate(searchData.min) || undefined
  })
    .then((res) => {
      paginationData.total = res.data.total
      tableData.value = res.data.staffList
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  searchData.max = ""
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleRefresh = () => {
  getTableData()
}
//#endregion

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
/**监听缓存job数据变化 */
jobStore.getJobFn()
watch(
  [() => jobStore.jobListStore],
  (newValue) => {
    // console.log(newValue)
    jobList.value = newValue.flat()
  },
  { immediate: true }
)
/**jobEND */
/**监听缓存team数据的变化 */
teamStore.getTeamFn()
watch(
  [() => teamStore.teamListStore],
  (newValue) => {
    teamList.value = newValue.flat()
  },
  { immediate: true }
)
/**teamEND */
// 时间戳转日期
const formatDate = (row: any, Tname: string) => {
  const date = new Date(row[Tname])
  if (!row[Tname]) {
    return ""
  }
  const Y = date.getFullYear() + "-"
  const M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) + "-" : date.getMonth() + 1 + "-"
  const D = date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " "
  return Y + M + D
}
const shortcuts = [
  {
    text: "当天",
    value: new Date()
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    }
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    }
  }
]
// ** 清除规则报错信息
const clearValidate = () => {
  formRef.value?.clearValidate()
}
// 列表删选功能
// #region
//用于存放随机数用于key属性的绑定
const reload = ref()

// 多选框的列表，列出表格的每一列
const checkBoxGroup = ref([
  "员工名",
  "员工性别",
  "手机号",
  "学历",
  "员工职位",
  "员工团队",
  "招聘人事",
  "员工生日",
  "面试日期",
  "入职日期",
  "合同日期",
  "转正日期"
])

// 当前选中的多选框，代表当前展示的列
const checkedColumns = ref([
  "员工名",
  "员工性别",
  "手机号",
  "学历",
  "员工职位",
  "员工团队",
  "招聘人事",
  "员工生日",
  "面试日期",
  "入职日期",
  "合同日期",
  "转正日期"
])

// colData中列出表格中的每一列，默认都展示
const colData = reactive([
  { title: "员工名", istrue: true },
  { title: "员工性别", istrue: true },
  { title: "手机号", istrue: true },
  { title: "学历", istrue: true },
  { title: "员工职位", istrue: true },
  { title: "员工团队", istrue: true },
  { title: "招聘人事", istrue: true },
  { title: "员工生日", istrue: true },
  { title: "面试日期", istrue: true },
  { title: "入职日期", istrue: true },
  { title: "合同日期", istrue: true },
  { title: "转正日期", istrue: true }
])

// 监听checkedColumns的变化，当checkedColumns发生变化时，重新渲染表格
const watchCheckedColumns = () => {
  // 遍历colData，将colData中的istrue属性设置为false
  colData.forEach((item) => {
    item.istrue = false
  })
  // 遍历checkedColumns，将checkedColumns中的值在colData中找到对应的列，将istrue属性设置为true
  checkedColumns.value.forEach((item) => {
    colData.forEach((col) => {
      if (item === col.title) {
        col.istrue = true
      }
    })
  })
  // 重新渲染表格
  reload.value = Math.random()
}
// #endregion
/** 图片批量上传 */
const fileList = ref<any>([]) /**图片列表 */
const dialogImageUrl = ref("") /**预览url  */
const dialogVisible1 = ref(false) /**预览弹窗 */
const dialogVisible2 = ref(false) /**上传弹窗 */
/**添加图片 弹窗激活*/
const handleAddImg = (row: any) => {
  RestBtn(event)
  currentName.value = row.name
  currentUpdateId.value = row.id
  if (row.image) {
    fileList.value = row.image?.split(",").map((item: any) => {
      return {
        name: item.split("/image/")[1],
        url: item
      }
    })
  }
  dialogVisible2.value = true
}
/**文件改变 */
const fileChange = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList.value = resfileList.filter((item: any) => item.uid !== file.uid) /**不符合规定的图片不在照片墙展示 */
  } else {
    fileList.value = resfileList
  }
}
// 移除图片
const handleRemove = (file: any) => {
  const list = fileList.value
  for (const i in list) {
    if (list[i].uid === file.uid) {
      list.splice(i, 1)
    }
  }
  fileList.value = list
}
/**确定上传 */
const handleCreateImg = async () => {
  if (fileList.value.length === 0) {
    ElMessage.success("请上传文件")
    return
  }
  const formData = new FormData()
  fileList.value.forEach((file: any) => {
    // console.log(file.status)
    if (file.status === "success") {
      formData.append("fileNames", file.name)
    } else {
      formData.append("files", file.raw)
    }
  })
  if (currentUpdateId.value != undefined) {
    formData.append("id", currentUpdateId.value)
  }
  await uploadImageLIst(formData).then((res: any) => {
    if (res.code == 200) {
      ElMessage.success("上传成功！")
      fileList.value = []
      currentUpdateId.value = undefined
      getTableData()
      dialogVisible2.value = false
    }
  })
}
/**取消上传 */
const restorm1 = () => {
  fileList.value = []
  currentUpdateId.value = undefined
}
// 预览图片
const handlePictureCardPreview = (file: any) => {
  dialogImageUrl.value = file.url
  dialogVisible1.value = true
}

/**批量下载 */
const handleSelectionChange = (val: any) => {
  formData1.downArr = val.map((item: any) => {
    return item.id
  })
}
const dialogVisible3 = ref<boolean>(false)
const formData1 = reactive<any>({
  download: "",
  downArr: []
})
const resetForm1 = () => {
  formData1.download = ""
  // formData1.downArr = []
}
const formRules1: FormRules = reactive({
  download: [{ required: true, trigger: "blur", message: "请输入密码" }]
})
const downLoad = () => {
  console.log(formData1.downArr.length)
  if (!formData1.downArr.length) {
    ElMessage.error("请选择要下载数据")
  } else {
    dialogVisible3.value = true
  }
}
const handleDownLoad = () => {
  const basePW = commonStore.DOWNLOADWORD
  if (formData1.download !== basePW) {
    ElMessage.error("密码错误，请重新输入！")
    formData1.download = ""
  } else {
    downLoadTable({
      ids: formData1.downArr
    }).then((res: any) => {
      const blob = new Blob([res.data], {
        type: "application/xlsx;charset=utf-8"
      })
      // console.log(res)
      const downloadElement = document.createElement("a")
      const href = window.URL.createObjectURL(blob)
      downloadElement.href = href
      downloadElement.download = "员工列表.xlsx"
      document.body.appendChild(downloadElement)
      downloadElement.click()
      window.URL.revokeObjectURL(href)
      dialogVisible3.value = false
      formData1.download = ""
    })
  }
}
console.log(formData.recruit, "-------")
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="name" label="员工名">
          <el-input v-model.trim="searchData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="recruit" label="招聘人事">
          <el-input v-model.trim="searchData.recruit" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="min" label="年龄" class="ageInput">
          <el-input v-model.number="searchData.min" placeholder="请输入最小年龄" />
          <span style="display: inline-block; padding: 0 10px">至</span>
          <el-input v-model.number="searchData.max" placeholder="请输入最大年龄" />
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select v-model="searchData.sex" clearable placeholder="请选择性别" style="width: 240px">
            <el-option :key="11" label="男" value="男" />
            <el-option :key="21" label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item prop="education" label="学历">
          <el-select v-model="searchData.education" clearable placeholder="请选择学历" style="width: 240px">
            <el-option :key="31" label="高中" value="高中" />
            <el-option :key="41" label="专科" value="专科" />
            <el-option :key="51" label="本科" value="本科" />
            <el-option :key="61" label="硕士" value="硕士" />
          </el-select>
        </el-form-item>
        <el-form-item prop="isPact" label="是否签订合同">
          <el-select v-model="searchData.isPact" clearable placeholder="请选择" style="width: 240px">
            <el-option :key="321" label="是" :value="true" />
            <el-option :key="421" label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item prop="job" label="职位">
          <!-- <el-input v-model="searchData.job" placeholder="请输入" /> -->
          <el-select v-model="searchData.job" clearable placeholder="请选择职位" style="width: 240px">
            <el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="team" label="团队">
          <!-- <el-input v-model="searchData.team" placeholder="请输入" /> -->
          <el-select v-model="searchData.team" clearable placeholder="请选择团队" style="width: 240px">
            <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="state" label="状态">
          <el-select v-model="searchData.state" clearable placeholder="请选择状态" multiple style="width: 240px">
            <el-option label="面试" value="面试" />
            <el-option label="试岗" value="试岗" />
            <el-option label="试用" value="试用" />
            <el-option label="转正" value="转正" />
            <el-option label="离职" value="离职" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 展示 -->
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-button type="primary" :icon="CirclePlus" @click="handleAdd">添加员工</el-button>
          <!-- <el-button type="danger" :icon="Delete">批量删除</el-button> -->
        </div>
        <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle @click="downLoad" />
          </el-tooltip>
          <el-tooltip content="刷新表格">
            <el-button type="primary" :icon="RefreshRight" circle @click="handleRefresh" />
          </el-tooltip>
        </div>
      </div>
      <!-- 筛选 -->
      <el-icon :size="20" style="float: right; font-size: 33px">
        <el-popover placement="bottom" trigger="hover" width="80" height="500">
          <template #reference>
            <el-icon :size="20"><Operation /></el-icon>
          </template>
          <div>
            <el-checkbox-group v-model="checkedColumns" @change="watchCheckedColumns" class="checkbox-wrap">
              <el-checkbox
                size="large"
                style="display: block"
                v-for="item in checkBoxGroup"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-checkbox-group>
          </div>
        </el-popover>
      </el-icon>

      <div class="table-wrapper">
        <el-table :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column v-if="colData[0].istrue" prop="name" label="员工名" align="center" />
          <el-table-column v-if="colData[1].istrue" prop="sex" label="员工性别" align="center" />
          <el-table-column v-if="colData[2].istrue" prop="phone" label="手机号" align="center" />
          <el-table-column v-if="colData[3].istrue" prop="education" label="学历" align="center" />
          <el-table-column v-if="colData[4].istrue" prop="job" label="员工职位" align="center" />
          <el-table-column v-if="colData[5].istrue" prop="team" label="员工团队" align="center" />
          <el-table-column v-if="colData[6].istrue" prop="recruit" label="招聘人事" align="center" />
          <el-table-column v-if="colData[7].istrue" prop="birth" label="员工生日" align="center">
            <template #default="scope">
              {{ formatDate(scope.row, "birth") }}
            </template>
          </el-table-column>
          <el-table-column v-if="colData[8].istrue" prop="interview" label="面试日期" align="center">
            <template #default="scope">
              {{ formatDate(scope.row, "interview") }}
            </template>
          </el-table-column>
          <el-table-column v-if="colData[9].istrue" prop="join" label="入职日期" align="center">
            <template #default="scope">
              {{ formatDate(scope.row, "join") }}
            </template>
          </el-table-column>
          <el-table-column v-if="colData[10].istrue" prop="pact" label="合同签订日期" align="center">
            <template #default="scope">
              {{ formatDate(scope.row, "pact") }}
            </template>
          </el-table-column>
          <el-table-column prop="pactExpire" label="合同结束日期" align="center">
            <template #default="scope">
              {{ formatDate(scope.row, "pactExpire") }}
            </template>
          </el-table-column>
          <el-table-column v-if="colData[11].istrue" prop="official" label="转正日期" align="center">
            <template #default="scope">
              {{ formatDate(scope.row, "official") }}
            </template>
          </el-table-column>
          <el-table-column prop="quit" label="离职日期" align="center">
            <template #default="scope">
              {{ formatDate(scope.row, "quit") }}
            </template>
          </el-table-column>
          <el-table-column prop="log" label="员工日志" align="center" />
          <el-table-column prop="image" label="员工图片" align="center" width="150">
            <template #default="scope">
              <el-button type="primary" link text bg size="small" @click="handleAddImg(scope.row)">
                添加 <span v-if="scope.row.image"> ({{ scope.row.image.split(",").length }}) </span></el-button
              >
              <!-- <el-button type="primary" link text bg size="small" @click="handleSeeImg(scope.row)">查看</el-button> -->
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center" />
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增/修改 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentUpdateId === undefined ? '新增员工' : '修改员工'"
      @close="resetForm"
      width="80%"
    >
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
        <el-form-item prop="name" label="员工姓名">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="phone" label="员工手机号">
          <el-input v-model="formData.phone" placeholder="请输入" maxlength="11" show-word-limit />
        </el-form-item>
        <!-- <el-form-item prop="card" label="员工身份证">
          <el-input v-model="formData.card" placeholder="请输入" maxlength="18" show-word-limit />
        </el-form-item> -->
        <el-form-item prop="job" label="员工职位">
          <!-- <el-input v-model="formData.job" placeholder="请输入" /> -->
          <el-select v-model="formData.job" clearable placeholder="请选择职位" style="width: 240px">
            <el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="team" label="员工团队">
          <!-- <el-input v-model="formData.team" placeholder="请输入" /> -->
          <el-select v-model="formData.team" clearable placeholder="请选择团队" style="width: 240px">
            <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="sex" label="员工性别">
          <el-select v-model="formData.sex">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item prop="state" label="状态">
          <el-select v-model="formData.state">
            <el-option label="面试" value="面试" />
            <el-option label="试岗" value="试岗" />
            <el-option label="试用" value="试用" />
            <el-option label="转正" value="转正" />
            <el-option label="离职" value="离职" />
          </el-select>
        </el-form-item>
        <el-form-item prop="recruit" label="招聘人事">
          <el-input v-model="formData.recruit" placeholder="请输入" disabled />
        </el-form-item>

        <!-- 学历 -->
        <el-form-item label="全日制学历">
          <el-select v-model="formData.education" placeholder="请选择学历">
            <el-option label="高中" value="高中" />
            <el-option label="专科" value="专科" />
            <el-option label="本科" value="本科" />
            <el-option label="硕士" value="硕士" />
            <el-option label="初中及以下" value="初中及以下" />
          </el-select>
        </el-form-item>
        <el-form-item prop="birth" label="出生日期">
          <el-date-picker
            v-model="formData.birth"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <el-form-item prop="join" label="员工加入日期" v-if="formData.state !== '面试'">
          <el-date-picker
            v-model="formData.join"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <!-- 新增 -->
        <el-form-item prop="interview" label="员工面试日期">
          <el-date-picker
            v-model="formData.interview"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <el-form-item prop="pact" label="签订合同日期" v-if="formData.state !== '试岗' && formData.state !== '面试'">
          <el-date-picker
            v-model="formData.pact"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <el-form-item
          prop="pactExpire"
          label="结束合同日期"
          v-if="formData.state !== '试岗' && formData.state !== '面试'"
        >
          <el-date-picker
            v-model="formData.pactExpire"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <el-form-item
          prop="official"
          label="员工转正日期"
          v-if="formData.state !== '试岗' && formData.state !== '面试' && formData.state !== '试用'"
        >
          <el-date-picker
            v-model="formData.official"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <!-- ---- -->
        <el-form-item
          prop="quit"
          label="员工离职日期"
          v-if="formData.state !== '试岗' && formData.state !== '面试' && formData.state !== '试用'"
        >
          <el-date-picker
            v-model="formData.quit"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <el-form-item prop="log" label="员工日志">
          <el-input v-model="formData.log" autosize type="textarea" placeholder="请输入" />
        </el-form-item>
        <!-- <el-form-item prop="image" label="员工图片">
          <el-input v-model="formData.image" placeholder="请输入" />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确认</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" title="照片墙" width="80%" @close="restorm1">
      <el-upload
        :file-list="fileList"
        list-type="picture-card"
        multiple
        :on-change="fileChange"
        accept="image/*"
        :show-file-list="true"
        :auto-upload="false"
      >
        <el-icon><Plus /></el-icon>
        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <el-icon>
                  <zoom-in />
                </el-icon>
              </span>
              <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>
      <el-dialog v-model="dialogVisible1">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <template #footer>
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="handleCreateImg">确认</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible3" title="下载密码" @close="resetForm1" width="50%">
      <el-form ref="formRef" :model="formData1" :rules="formRules1" label-width="100px" label-position="left">
        <el-form-item prop="download" label="下载密码">
          <el-input v-model="formData1.download" placeholder="请输入下载密码" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="handleDownLoad">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.ageInput :deep(.el-input) {
  width: 45% !important;
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
